{% extends 'base_dashboard.html' %}

{% block title %}Start exam — {{ program.title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
      <div class="display-6 text-success mb-2"><i class="bi bi-shield-check"></i></div>
      <h4 class="fw-bold">Exam unlocked</h4>
      <p class="text-muted">{{ program.title }}</p>
      <ul class="list-unstyled small text-muted text-start mx-auto" style="max-width:22rem;">
        <li class="mb-1">• {{ program.questions_per_exam }} random MCQs (from {{ program.min_question_bank }}+ bank)</li>
        <li class="mb-1">• Pass mark <strong>{{ program.passing_score }}%</strong></li>
        <li class="mb-1">• Attempts left: {{ application.attempts_remaining }}</li>
        <li class="mb-1">• One question at a time in a <strong>dedicated exam window</strong></li>
        {% if program.time_limit_minutes %}
        <li class="mb-1">• Timed exam: <strong>{{ program.time_limit_minutes }} minutes</strong> (~{% widthratio program.time_limit_minutes program.questions_per_exam 60 %} sec / question)</li>
        {% else %}
        <li class="mb-1">• Timed exam: <strong>{{ program.recommended_time_limit_minutes }} minutes</strong></li>
        {% endif %}
        <li class="mb-1">• First: a <strong>practice question</strong> (not scored). Then full screen + timer for the real test.</li>
        <li class="mb-1">• Results appear about <strong>{{ program.results_delay_minutes|default:5 }} minutes</strong> after you submit</li>
        <li class="mb-1 text-danger">• Leaving the exam window, tab, or full screen <strong>cancels</strong> the attempt</li>
      </ul>
      <form method="post" class="mt-3">
        {% csrf_token %}
        <button class="btn btn-success btn-lg w-100 fw-semibold"
                onclick="return confirm('Open the secure exam session? A dedicated window will start with a practice question.');">
          Open secure exam session
        </button>
      </form>
      <a href="{% url 'certifications:my_certs' %}" class="btn btn-link mt-2">Cancel</a>
    </div>
  </div>
</div>
{% endblock %}